﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Product Report</title>
	<meta charset="UTF-8">
	<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=utf-8'/>
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="Generator" content="Oybab Trading System">
	<meta name="Author" content="Oybab">
	<style type="text/css">
		.xrcsFont8 {color:#000000;font-family:'Microsoft YaHei'; font-size:11px;}
		.xrcsFont9 {color:#000000;font-family:'Microsoft YaHei'; font-size:12px;}
		.xrcsFont10 {color:#000000;font-family:'Microsoft YaHei'; font-size:13px;}
		.xrcsFont11 {color:#000000;font-family:'Microsoft YaHei'; font-size:15px;}
		.xrcsFont12 {color:#000000;font-family:'Microsoft YaHei'; font-size:16px;}
		.xrcsFont13 {color:#000000;font-family:'Microsoft YaHei'; font-size:17px;}
		.xrcsFont14 {color:#000000;font-family:'Microsoft YaHei'; font-size:18px;}
		.xrcsFont15 {color:#000000;font-family:'Microsoft YaHei'; font-size:20px;}
		.xrcsFont16 {color:#000000;font-family:'Microsoft YaHei'; font-size:21px;}
		.xrcsFont17 {color:#000000;font-family:'Microsoft YaHei'; font-size:22px;}
		.xrcsFont18 {color:#000000;font-family:'Microsoft YaHei'; font-size:23px;}

		.FixIE7 {height:0px;width:0px;overflow:hidden;font-size:0px;line-height:0px;}
        .Line{ border-bottom: #000000 1px dashed; width:200mm;}

        /* This place replace dynamically if needed */
		/*${DynamicStyles}*/

        /* For display tr border and fixed table size */ 
		table{ border-collapse:collapse; table-layout:fixed; }
		/* For fixed td size */ 
		td{word-wrap:break-word; overflow-wrap: break-word; word-break: break-word;}
        /* For fix pdf margin */
		body{ max-width: 99%; margin:0px; text-align:center}


		.center-screen {
		  display: inline-block;
		}

	</style>
</head>
<body  style="background-color:#FFFFFF">
<div class="center-screen" style="margin:20,10">
<!-- Table for Head -->
<table id="Head" cellpadding="0" cellspacing="0" border="0" style="empty-cells:show;position:relative;">
<!-- Company and Title -->
	<tr style="vertical-align:top;">
		<td class="xrcsFont16"  style="width:200px;height:28px;"><!--[if lte IE 7]><div class="csF7D3565D"></div><![endif]--></td>
	</tr>
	<tr style="vertical-align:top">
		<td class="xrcsFont16"  style="width:200mm;height:38px;width:100%;line-height:20px;text-align:center;vertical-align:middle;">${CompanyName}</td>
	</tr>
	<tr style="vertical-align:top">
		<td class="xrcsFont14"  style="width:200mm;height:28px;width:100%;line-height:18px;text-align:center;vertical-align:middle;">${Time}</td>
	</tr>
<!-- Line -->
	<tr style="vertical-align:top;width:200mm;height:8px;">
		<td class="xrcsFont9 Line" />
	</tr>
	<tr style="vertical-align:top;width:200mm;height:1px;">
		<td class="xrcsFont9" />
	</tr>
</table>


<!-- Table for DataSource -->
<table id="DataSource" cellpadding="0" cellspacing="0" border="0" style="empty-cells:show;position:relative;">
<!-- DataSource head -->
	<tr>
		<td class="xrcsFont14" style="width:34px;height:28px;"><!--[if lte IE 7]><div class="FixIE7"></div><![endif]--></td>
		<td class="xrcsFont14" colspan="3" style="width:280px;height:30px;line-height:19px;text-align:left;vertical-align:middle;">${ProductName}</td>
		<td class="xrcsFont14" style="width:90px;height:30px;line-height:19px;text-align:center;vertical-align:middle;">${Price}</td>
		<td class="xrcsFont14" style="width:90px;height:30px;line-height:19px;text-align:center;vertical-align:middle;">${Count}</td>
		<td class="xrcsFont14" style="width:110px;height:30px;line-height:19px;text-align:center;vertical-align:middle;">${TotalPrice}</td>
		<td class="xrcsFont14" colspan="2" style="width:151px;height:30px;line-height:19px;text-align:center;vertical-align:middle;">${Proportion}</td>
	</tr>
	<!-- Line -->
	<tr style="vertical-align:top;width:200mm;height:2px;">
		<td class="xrcsFont9 Line" colspan="9"/>
	</tr>
	<tr style="vertical-align:top;width:200mm;height:1px;">
		<td class="xrcsFont9" colspan="9"/>
	</tr>
	<!-- DataSource dynamically generate by background to a json and import by js -->
</table>

<!-- Table for Foot -->
<table id="Foot" cellpadding="0" cellspacing="0" border="0" style="empty-cells:show;position:relative;">
<!-- Line -->
	<tr style="vertical-align:top;width:200mm;height:1px;">
		<td class="xrcsFont9" colspan="8"/>
	</tr>
	<tr style="vertical-align:top;width:200mm;height:28px;">
		<td class="xrcsFont9" colspan="8"/>
	</tr>
	<tr style="vertical-align:top;width:200mm;height:2px;">
		<td  colspan="8" style="width:34px;height:28px;"><!--[if lte IE 7]><div class="FixIE7"></div><![endif]--></td>
	</tr>
	<tr>
		<td style="width:0px;height:23px;"></td>
		<td class="xrcsFont14" colspan="2" style="width:358px;height:23px;line-height:17px;text-align:left;vertical-align:middle;">${TotalPrice}</td>
		<td class="xrcsFont14" style="width:227px;height:23px;"><!--[if lte IE 7]><div class="FixIE7"></div><![endif]--></td>
		<td class="xrcsFont14" colspan="4" style="width:170px;height:23px;line-height:17px;text-align:center;vertical-align:middle;">${CalcTotalPrice}</td>
	</tr>
	<!-- Line -->
	<tr style="vertical-align:top;width:200mm;height:2px;">
		<td class="xrcsFont9 Line" colspan="8"/>
	</tr>
	<tr style="vertical-align:top;width:200mm;height:1px;">
		<td class="xrcsFont9" colspan="8"/>
	</tr>
	<tr style="vertical-align:top;width:200mm;height:2px;">
		<td  colspan="8" style="width:34px;height:28px;"><!--[if lte IE 7]><div class="FixIE7"></div><![endif]--></td>
	</tr>
</table>
</div>

<!--${DynamicImportJquery}-->
<script type="text/javascript">


var parameters = null;
var dataSource = null;
var isGenerated = false;

/* This place replace dynamically if needed */
/*${DynamicParameter}*/
/*${DynamicDataSource}*/
/*${DynamicIsGenerated}*/

var maxPrice = 0;

if (null != parameters && isGenerated == true)
{
	var parametersObj = JSON.parse(parameters.replace("\r\n","<br/>"));
	for(var item in parametersObj) {
		var ojbInItem = parametersObj[item];
		for(var key in ojbInItem)
		{

			if (key == "MaxPrice")
			{
				maxPrice =  parseFloat(ojbInItem[key]);
			}
			// only replace first match
			//document.body.innerHTML = document.body.innerHTML.replace('${' + key + '}', ojbInItem[key]);
			var index = 0;
			do {
				document.body.innerHTML = document.body.innerHTML.replace('${' + key + '}', ojbInItem[key]);
			} while((index = document.body.innerHTML.indexOf('${' + key + '}', index + 1)) > -1);

		}
	}
	// remove unseded rows
	var elems = $('td').each(function(){
		var tdValue = $.trim(this.textContent);
		
		if (tdValue.indexOf("${") !== -1 && tdValue.indexOf("}") !== -1)
		{
			$(this).parent("tr:first").remove();
		}
	});

}


function getProperty(property)
{
	 if (typeof (property) == "undefined")
	 {
		 return 0;
	 }
	 
	return property;
}

function getProgressbar(totalPrice)
{
	 if (typeof (totalPrice) == "undefined")
	 {
		 return 0;
	 }
	 else if (totalPrice == maxPrice)
	 {
		 return 100;
	 }
	 else if (totalPrice <= 0)
	 {
		 return 0;
	 }
	return parseInt(totalPrice  / maxPrice * 100);
}


if (null != dataSource && isGenerated == true)
{
	var newTrList = "";
	var dataSourceObj = JSON.parse(dataSource);
	var no = 1;
	for(var item in dataSourceObj) {
		var ojbInItem = dataSourceObj[item];
			newTrList = newTrList + 	'<tr>'
			+ '<td class="xrcsFont14" style="width:34px;height:19px;text-align:center;vertical-align:center;">'  + no + '</td>'
		+ '<td class="xrcsFont14" colspan="3" style="width:280px;height:21px;line-height:19px;text-align:left;vertical-align:middle;">' + ojbInItem["ProductName"] + '</td>'
		+ '<td class="xrcsFont14" style="width:90px;height:21px;line-height:19px;text-align:center;vertical-align:middle;">' + ojbInItem["Price"] + '</td>'
		+ '<td class="xrcsFont14" style="width:90px;height:21px;line-height:19px;text-align:center;vertical-align:middle;">' + getProperty(ojbInItem["Count"])  + '</td>'
		+ '<td class="xrcsFont14" style="width:110px;height:21px;line-height:19px;text-align:center;vertical-align:middle;">' + ojbInItem["TotalPrice"] + '</td>'
		+ '<td class="xrcsFont14" colspan="2" style="width:151px;height:19px;line-height:17px;text-align:center;vertical-align:middle;">' 
		+ '<div id="myProgress" style="width: 100%;background-color: white;"><div id="myBar" style="width: ' + getProgressbar(ojbInItem["TotalPriceDouble"])+ '%;height: 19px;background-color: #8B0000;"></div></div>'
		+'</td> '
	+ '</tr>';

		++no;
	}
	
	$('#DataSource:last').append(newTrList);
}
else if (isGenerated == true)
{
	$('#DataSource').remove();
}


</script>
</body>
</html>